<template>
	<view class="address-edit-content" :data-theme="themeStyle">
		<view class="edit-wrap">
			<view class="tip">地址信息</view>
			<view class="edit-item">
				<text class="tit">
					{{ $lang('consignee') }}
					<text>*</text>
				</text>
				<input
					class="uni-input"
					type="text"
					placeholder-class="placeholder-class"
					:placeholder="$lang('consigneePlaceholder')"
					maxlength="30"
					name="name"
					v-model="formData.name"
				/>
			</view>
			<view class="edit-item">
				<text class="tit">
					{{ $lang('mobile') }}
					<text>*</text>
				</text>
				<input
					class="uni-input"
					type="number"
					placeholder-class="placeholder-class"
					:placeholder="$lang('mobilePlaceholder')"
					maxlength="11"
					value=""
					v-model="formData.mobile"
				/>
			</view>
			<view class="edit-item">
				<text class="tit">{{ $lang('telephone') }}</text>
				<input
					class="uni-input"
					type="text"
					placeholder-class="placeholder-class"
					:placeholder="$lang('telephonePlaceholder')"
					maxlength="20"
					value=""
					v-model="formData.telephone"
				/>
			</view>
			<!--  外卖地址区分 -->
			<view class="edit-item">
				<text class="tit">
					{{ $lang('receivingCity') }}
					<text>*</text>
				</text>
				<view class="text_inp" :class="{ empty: !formData.full_address, 'color-tip': !formData.full_address }" @click="selectAddress">
					{{ formData.full_address ? formData.full_address : '请选择省市区县' }}
				</view>
			
				<text @click="selectAddress" class="padding-left iconfont iconlocation"></text>
			</view>
			<!-- <view class="edit-item">
				<text class="tit">
					{{ $lang('receivingCity') }}
					<text>*</text>
				</text>
				<pick-regions :default-regions="defaultRegions" @getRegions="handleGetRegions">
					<text class="select-address " :class="{ empty: !formData.full_address, 'color-tip': !formData.full_address }">
						{{ formData.full_address ? formData.full_address : '请选择省市区县' }}
					</text>
				</pick-regions>
			</view> -->
			<view class="edit-item">
				<text class="tit">
					{{ $lang('address') }}
					<text>*</text>
				</text>
				<input class="uni-input" type="text" placeholder-class="placeholder-class" :placeholder="$lang('addressPlaceholder')" maxlength="50" v-model="formData.address" />
				<!-- <text @click="selectAddress" class="padding-left iconfont iconlocation"></text> -->
			</view>
		</view>
		<view class="btn">
			<button type="primary" class="add" @click="saveAddress">{{ $lang('save') }}</button>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
import pickRegions from '@/components/pick-regions/pick-regions.vue';
import validate from 'common/js/validate.js';
import globalConfig from '@/common/js/golbalConfig.js';
import Config from '@/common/js/config.js';
export default {
	components: {
		pickRegions
	},
	data() {
		return {
			formData: {
				id: 0,
				name: '',
				mobile: '',
				telephone: '',
				province_id: '',
				city_id: '',
				district_id: '',
				community_id: '',
				address: '',
				full_address: '',
				latitude: 0,
				longitude: 0,
				is_default: 1,
				province:'四川省',//省市区
				city:'成都市',
				district:'武侯区',
			},
			address: '',
			addressValue: '',
			back: '/otherpages/member/address/address', // 返回页
			redirect: 'redirectTo', // 跳转方式
			flag: false, //防重复标识
			defaultRegions: [],
			localType:2
		};
	},
	onLoad(option) {
		if (option.back) this.back = option.back;
		if (option.redirect) this.redirect = option.redirect;
		if (option.type) this.localType = option.type;
		if (option.id && !option.name) {
			this.formData.id = option.id;
			console.log('on444',option.id,this.formData.id)
			this.getAddressDetail();
		} else if (option.name) {
			if (uni.getStorageSync('addressInfo')) this.formData = uni.getStorageSync('addressInfo');
			this.formData.address = option.name;
			this.getAddress(option.latng);
			//给formData复制
			var tempArr = this.getQueryVariable('latng').split(',');
			this.formData.latitude = tempArr[0];
			this.formData.longitude = tempArr[1];
		}
	},
	onBackPress() {
		uni.setStorageSync('addressInfo', '');
	},
	onShow() {
		// 刷新多语言
		this.$langConfig.refresh();
		if (this.formData.id) {
			uni.setNavigationBarTitle({
				title: '编辑收货地址'
			});
		} else {
			uni.setNavigationBarTitle({
				title: '新增收货地址'
			});
		}
	},
	onReady() {
		this.$refs.loadingCover.hide();
	},
	onHide() {
		this.flag = false;
	},
	mixins: [globalConfig],
	methods: {
		getAddressDetail() {
			this.$api.sendRequest({
				url: '/api/memberaddress/info',
				data: {
					id: this.formData.id
				},
				success: res => {
					console.log('addressDetail333',res)
					let data = res.data;
					if (data != null) {
						this.formData.name = data.name;
						this.formData.mobile = data.mobile;
						this.formData.telephone = data.telephone;
						this.formData.address = data.address;
						this.formData.full_address = data.full_address;
						this.formData.latitude = data.latitude;
						this.formData.longitude = data.longitude;
						this.formData.is_default = data.is_default;
						this.addressValue = '';
						this.addressValue += res.data.province_id != undefined ? res.data.province_id : '';
						this.addressValue += res.data.city_id != undefined ? '-' + res.data.city_id : '';
						this.addressValue += res.data.district_id != undefined ? '-' + res.data.district_id : '';
						this.localType = data.type;
						this.defaultRegions = [data.province_id, data.city_id, data.district_id];
					}
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		//获取详细地址
		getAddress(value) {
			this.$api.sendRequest({
				url: '/api/memberaddress/tranAddressInfo',
				data: {
					latlng: value
				},
				success: res => {
					if (res.code == 0) {
						this.formData.full_address = '';
						this.formData.full_address += res.data.province != undefined ? res.data.province : '';
						this.formData.full_address += res.data.city != undefined ? '-' + res.data.city : '';
						this.formData.full_address += res.data.district != undefined ? '-' + res.data.district : '';
						this.addressValue = '';
						this.addressValue += res.data.province_id != undefined ? res.data.province_id : '';
						this.addressValue += res.data.city_id != undefined ? '-' + res.data.city_id : '';
						this.addressValue += res.data.district_id != undefined ? '-' + res.data.district_id : '';
					} else {
						// this.showToast({
						// 	title: '数据有误'
						// });
						uni.showToast({
							title: '数据有误'
						});
					}
				}
			});
		},
		// 获取选择的地区
		handleGetRegions(regions) {
			console.log('获取选中的地区',regions)
			this.formData.full_address = '';
			this.formData.full_address += regions[0] != undefined ? regions[0].label : '';
			this.formData.full_address += regions[1] != undefined ? '-' + regions[1].label : '';
			this.formData.full_address += regions[2] != undefined ? '-' + regions[2].label : '';
			this.addressValue = '';
			this.addressValue += regions[0] != undefined ? regions[0].value : '';
			this.addressValue += regions[1] != undefined ? '-' + regions[1].value : '';
			this.addressValue += regions[2] != undefined ? '-' + regions[2].value : '';
		},

		selectAddress() {
			// #ifdef MP
			uni.chooseLocation({
				success: res => {
					this.formData.latitude = res.latitude;
					this.formData.longitude = res.longitude;
					this.formData.address = res.name;
					this.formData.full_address = res.address;//省市区地址
					// this.getAddress(res.latitude + ',' + res.longitude);
					console.log('diqu222',res,this.formData)
				},
				fail(res) {
					uni.getSetting({
						success: function(res) {
							var statu = res.authSetting;
							if (!statu['scope.userLocation']) {
								uni.showModal({
									title: '是否授权当前位置',
									content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
									success(tip) {
										if (tip.confirm) {
											uni.openSetting({
												success: function(data) {
													if (data.authSetting['scope.userLocation'] === true) {
														this.$util.showToast({
															title: '授权成功'
														});
														//授权成功之后，再调用chooseLocation选择地方
														setTimeout(function() {
															uni.chooseLocation({
																success: data => {
																	this.formData.latitude = res.latitude;
																	this.formData.longitude = res.longitude;
																	this.formData.address = res.name;
																	this.getAddress(res.latitude + ',' + res.longitude);
																}
															});
														}, 1000);
													}
												}
											});
										} else {
											this.$util.showToast({
												title: '授权失败'
											});
										}
									}
								});
							}
						}
					});
				}
			});
			// #endif
			// #ifdef H5
			var urlencode = this.formData;
			uni.setStorageSync('addressInfo', urlencode);
			let backurl = Config.h5Domain + '/otherpages/member/address_edit/address_edit?type=' + this.localType;
			if (this.formData.id) backurl += '&id=' + this.formData.id;
			if (this.back) backurl += '&back=' + this.back;

			if(!Config.mpKey){
				this.$util.showToast({
					title: '腾讯地图key未设置，请联系平台管理员',
				});
				return;
			}
			window.location.href = 'https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=' + encodeURIComponent(backurl) + '&key=' + Config.mpKey + '&referer=myapp';
			// #endif
		},
		getQueryVariable(variable) {
			var query = window.location.search.substring(1);
			var vars = query.split('&');
			for (var i = 0; i < vars.length; i++) {
				var pair = vars[i].split('=');
				if (pair[0] == variable) {
					return pair[1];
				}
			}
			return false;
		},
		vertify() {
			this.formData.name = this.formData.name.trim();
			this.formData.mobile = this.formData.mobile.trim();
			this.formData.address = this.formData.address.trim();
			var rule = [
				{
					name: 'name',
					checkType: 'required',
					errorMsg: '请输入姓名'
				},
				{
					name: 'mobile',
					checkType: 'required',
					errorMsg: '请输入手机号'
				},
				{
					name: 'mobile',
					checkType: 'phoneno',
					errorMsg: '请输入正确的手机号'
				},
				{
					name: 'full_address',
					checkType: 'required',
					errorMsg: '请选择省市区县'
				},
				{
					name: 'address',
					checkType: 'required',
					errorMsg: '详细地址不能为空'
				}
			];
			var checkRes = validate.check(this.formData, rule);
			if (checkRes) {
				return true;
			} else {
				this.$util.showToast({
					title: validate.error
				});
				this.flag = false;
				return false;
			}
		},
		saveAddress() {
			if (this.flag) return;
			this.flag = true;
			if (this.vertify()) {
				let that = this
				let addressValueArr = that.addressValue.split('-'),
					data = {},
					url = '';
					console.log('res111',that.formData)
					// 一级修改
					// // const that = this;
					// 		uni.authorize({
					// 			scope: 'scope.userLocation',
					// 			success() { // 允许授权
					// 				uni.getLocation({
					// 					type: 'wgs84',
					// 					success (res) {
					// 						console.log('loc111',res);
					// 					}
					// 				});
					// 			},fail(){    // 拒绝授权
					// 				that.openConfirm();
					// 				console.log("你拒绝了授权，无法获得周边信息")
					// 			}
					// 		})	
					
					
					// 二级修改
					uni.getLocation({
					    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					    success:(res)=>{
							let that=this
					        const latitude = that.formData.latitude;
					        const longitude = that.formData.longitude;
							console.log('地址选择',res)
					        uni.request({
								header:{
									"Content-Type": "application/text"
								},
								//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
								// url:'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location='+that.formData.longitude+','+that.formData.latitude+'&key=280802ed0116fef931dbcf5e7e9278d7&radius=1000&extensions=all',
								url:'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location='+that.formData.longitude+','+that.formData.latitude+'&key=ffb8acc634d4fd24e748620305472dc2',
								success(re) {
									console.log('成功获取地址逆解析',re)
									if(re.statusCode===200){
										that.formData.province=re.data.regeocode.addressComponent.province
										that.formData.city=re.data.regeocode.addressComponent.city
										that.formData.district=re.data.regeocode.addressComponent.district
										console.log("获取中文街道地理位置成功",that.formData)
										
										
										
										let data = {};
										console.log('data222',data,that.formData)
										data = {
											name: that.formData.name,
											mobile: that.formData.mobile,
											telephone: that.formData.telephone,
											// province_id: addressValueArr[0],
											// city_id: addressValueArr[1],
											// district_id: addressValueArr[2],
											
											province: that.formData.province, // 省市区
											city: that.formData.city,
											district: that.formData.district,
											community_id: 0,
											address: that.formData.address,
											full_address: that.formData.full_address,
											latitude: that.formData.latitude,
											longitude: that.formData.longitude,
											is_default: that.formData.is_default,
											type: that.localType
										};
										
										url = 'add';
										if (that.formData.id) {
											url = 'edit';
											data.id = that.formData.id;
										}
										console.log('data333',data,that.formData)
										that.$api.sendRequest({
											url: '/api/memberaddress/' + url,
											data: data,
											success: res => {
												that.flag = false;
												if (res.code == 0) {
													if (that.back != '' && url != 'edit') {
														// this.$util.redirectTo(this.back, {}, this.redirect);
														let jump = true;
														let arr = getCurrentPages().reverse();
														for (let i = 0; i < arr.length; i++) {
															if (that.back.indexOf(arr[i].route) != -1) {
																jump = false;
																uni.navigateBack({
																	delta: i
																});
																break;
															}
														}
														if (jump) {
															that.$util.redirectTo(that.back, {}, 'redirectTo');
														}
													} else {
														that.$util.showToast({
															title: res.message
														});
														that.$util.redirectTo(that.back, {}, 'redirectTo');
													}
													uni.removeStorageSync('addressInfo');
												}else{
													that.$util.showToast({
														title: res.message
													});
												}
											},
											fail: res => {
												that.flag = false;
											}
										})
										
									}else{
										console.log("获取信息失败，请重试！")
									}
								 }
							});
					    }
					});


					// 原代码
				// console.log('data222',data,that.formData)
				// data = {
				// 	name: that.formData.name,
				// 	mobile: that.formData.mobile,
				// 	telephone: that.formData.telephone,
				// 	// province_id: addressValueArr[0],
				// 	// city_id: addressValueArr[1],
				// 	// district_id: addressValueArr[2],
					
				// 	province: that.formData.province, // 省市区
				// 	city: that.formData.city,
				// 	district: that.formData.district,
				// 	community_id: 0,
				// 	address: that.formData.address,
				// 	full_address: that.formData.full_address,
				// 	latitude: that.formData.latitude,
				// 	longitude: that.formData.longitude,
				// 	is_default: that.formData.is_default,
				// 	type: that.localType
				// };
				
				
				// url = 'add';
				// if (that.formData.id) {
				// 	url = 'edit';
				// 	data.id = that.formData.id;
				// }
				// console.log('data333',data,that.formData)
				// that.$api.sendRequest({
				// 	url: '/api/memberaddress/' + url,
				// 	data: data,
				// 	success: res => {
				// 		that.flag = false;
				// 		if (res.code == 0) {
				// 			if (that.back != '' && url != 'edit') {
				// 				// this.$util.redirectTo(this.back, {}, this.redirect);
				// 				let jump = true;
				// 				let arr = getCurrentPages().reverse();
				// 				for (let i = 0; i < arr.length; i++) {
				// 					if (that.back.indexOf(arr[i].route) != -1) {
				// 						jump = false;
				// 						uni.navigateBack({
				// 							delta: i
				// 						});
				// 						break;
				// 					}
				// 				}
				// 				if (jump) {
				// 					that.$util.redirectTo(that.back, {}, 'redirectTo');
				// 				}
				// 			} else {
				// 				that.$util.showToast({
				// 					title: res.message
				// 				});
				// 				that.$util.redirectTo(that.back, {}, 'redirectTo');
				// 			}
				// 			uni.removeStorageSync('addressInfo');
				// 		}else{
				// 			that.$util.showToast({
				// 				title: res.message
				// 			});
				// 		}
				// 	},
				// 	fail: res => {
				// 		that.flag = false;
				// 	}
				// });
			}
		}
	}
};
</script>

<style lang="scss">
/deep/ pick-regions,
.pick-regions {
	flex: 1;
}

.edit-wrap {
	background: #fff;
	overflow: hidden;

	.tip {
		padding: 20rpx 30rpx 10rpx;
		background-color: #f8f8f8;
		color: $color-tip;
	}
}

.edit-item {
	display: flex;
	align-items: center;
	margin: 0 30rpx;
	min-height: 100rpx;
	background-color: #fff;

	.text_inp {
		margin-left: $margin-updown;
		flex: 1;
	}

	.tit {
		width: 148rpx;

		text {
			margin-left: 10rpx;
			color: #ff4544;
		}

		&.margin_tit {
			align-self: flex-start;
			margin-top: 24rpx;
		}
	}

	.iconlocation {
		color: #606266;
		align-self: flex-start;
		margin-top: 20rpx;
	}

	.select-address {
		display: block;
		margin-left: 10rpx;

		&.empty {
			color: #808080;
		}
	}

	textarea,
	input {
		flex: 1;
		font-size: $font-size-base;
		margin-left: 20rpx;
		padding: 0;
	}

	textarea {
		margin-top: 6rpx;
		height: 100rpx;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
		line-height: 50rpx;
	}
}

.edit-wrap > .edit-item + .edit-item {
	border-top: 2rpx solid #ebedf0;
}

.add {
	margin-top: 60rpx;
	height: 80rpx;
	line-height: 80rpx !important;
	border-radius: 80rpx;
	font-weight: 500;
	width: calc(100% - 60rpx);
	margin-left: 30rpx;
}

.btn {
	position: fixed;
	width: 100%;
	bottom: 30rpx;
	height: auto;
	padding-bottom: constant(safe-area-inset-bottom);
	/*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom);
	/*兼容 IOS>11.2*/
}
</style>
